<template>
<div>
<el-row :gutter="10">
  <el-col :span="16">
    <el-tag>客户资料ID：{{id}}</el-tag>
    <hr>
    <el-form :model="form" label-width="110px">
      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="客户姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入客户姓名"/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号"/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="职业" prop="occupation">
            <el-select  clearable placeholder="请输入职业" v-model="form.occupation">
              <el-option v-for="item in dict.type.education" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="学历" prop="education">
           <el-select clearable placeholder="请输入学历" v-model="form.education">
             <el-option v-for="item in dict.type.occupation" :label="item.label" :value="item.value" :key="item.value"></el-option>

           </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="所在地区" prop="area">
            <el-cascader
              v-model="form.area"
              :options="provinceAndCityDataOptions"
              @change="handleChangeArea"/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="微信号" prop="weixin">
            <el-input v-model="form.weixin" placeholder="请输入微信号"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="年龄" prop="age">
            <el-input v-model="form.age" placeholder="请输入年龄"/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="专业" prop="major">
            <el-select clearable placeholder="请输入学历" v-model="form.major">
              <el-option v-for="item in dict.type.major" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="在职情况" prop="job">
            <el-select clearable placeholder="请输在职情况" v-model="form.job">
              <el-option v-for="item in dict.type.job" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="当前薪资" prop="salary">
            <el-select clearable placeholder="请输入当前薪资" v-model="form.salary">
              <el-option v-for="item in dict.type.salary" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="qq" prop="qq">
            <el-input v-model="form.qq" placeholder="请输入qq"/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="性别" prop="sex">
            <el-select clearable placeholder="请输入当前薪资" v-model="form.salary">
              <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="目标薪资" prop="salary">
            <el-select clearable placeholder="请输入目标薪资" v-model="form.expectedsalary">
              <el-option v-for="item in dict.type.salary" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入备注"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-tag>客户意向</el-tag>
      <hr>

      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="意向学科" prop="subject">
            <el-select clearable @change="handleChangeSubject"  placeholder="请输入意向学科" v-model="form.subject">
              <el-option v-for="item in dict.type.course_subject" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="意向课程" prop="courseId">
            <el-select clearable  v-model="form.courseId"  placeholder="请输入意向课程" >
              <el-option @click.native="handleChangeCourse(course)" v-for="course in courseOptions" :label="course.name" :value="course.id" :key="course.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="意向金额" prop="price">
            <el-input readonly v-model="form.price" placeholder="请输入意向金额"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="学习原因" prop="reasons">
            <el-input v-model="form.reasons" placeholder="请输入学习原因"/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="职业计划" prop="plan">
            <el-input v-model="form.plan" placeholder="请输入职业计划"/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="时间计划" prop="planTime">
            <el-date-picker clearable
                            v-model="form.planTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择时间计划">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="其他意向" prop="otherIntention">
            <el-input v-model="form.otherIntention" placeholder="请输入其他意向"/>
          </el-form-item>
        </el-col>
      </el-row>
    <el-tag>添加沟通记录</el-tag>
    <hr>

      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="跟进状态" prop="status">
            <el-select clearable placeholder="请输入跟进状态" v-model="form.status">
              <el-option v-for="item in dict.type.track_status" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
          <el-col :span="8">
            <el-form-item label="下次跟进时间" prop="nextTime">
              <el-date-picker clearable
                              v-model="form.nextTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择下次跟进时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
      </el-row>

      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="沟通重点" prop="communicationpoint">
            <el-select clearable placeholder="请输入跟进状态" v-model="form.communicationpoint">
              <el-option v-for="item in dict.type.communication_point" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="沟通纪要" prop="jiyao">
            <el-input v-model="form.jiyao" placeholder="请输入客户姓名"/>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row type="flex" justify="end">
        <el-col :span="6">
          <el-button size="mini" type="primary" @click="submitForm">保存</el-button>
          <el-button size="mini" type="success" @click="tiForm">提回公海</el-button>
        </el-col>

        <el-col :span="6">
          <el-button  size="mini" type="danger">伪线索</el-button>
          <el-button  size="mini" type="success">转商机</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-col>
  <el-col :span="8">
    <track-list :id="id" :key="trackListkey"></track-list>
  </el-col>
  <give-back ref="giveback"></give-back>
</el-row>

</div>
</template>

<script>
  //省级二级联动
  import { provinceAndCityData, CodeToText, TextToCode } from 'element-china-area-data';
  import  { getBusiness } from '@/api/crm/business'
  import {listCourse} from "@/api/crm/course";
  import TrackList from "@/views/crm/business/components/track-list"
  import {addClueTrack,transform2Business} from '@/api/crm/businessTrack';
  import  {addBusiness} from "../../../../api/crm/business";

  import GiveBack from "@/views/crm/business/components/give-back"



  export default {
        name: "track-index1",
      components:{ GiveBack, TrackList },
      dicts:[ 'occupation','education' ,'major','job','salary','course_subject','track_status','communication_point','sys_user_sex'],
      props:{
        clueId:{type:[String,Number],},

      },
    watch: {
      clueId(newValue,oldValue){
        this.id=newValue
        this.getList()
      },
      view: {
        handler: function (newValue, oldCalue) {
          this.disabled = newValue;
        },
        immediate:true
      }
    },
      data(){
          return {
            id:this.clueId,
            form:{
              price:null,
            },
            provinceAndCityDataOptions:provinceAndCityData,
            courseOptions:[],
            trackListkey : 0,
          }
      },
      created() {
            this.getList();
      },
      methods:{
        getList(){
          getBusiness(this.id).then(resp=>{
            this.form=resp.data;
          })
          this.trackListkey++;
        },
        //省级二级联动
        handleChangeArea(value){
          console.log(value)
          if (value && value.length>0){
             this.form.provinces=CodeToText[value[0]]
             this.form.city=CodeToText[value[1]]
          }else {
            this.form.provinces=''
            this.form.city=''
          }
        },
        //科学联动
        handleChangeSubject(value){
          listCourse({subject:value}).then(resp=>{
            this.courseOptions=resp.rows;
          })
        },
        handleChangeCourse(course){
          console.log(course)
          this.form.price=course.price

        },
        //保存
        submitForm(){
          addClueTrack(this.form).then(resp =>{
            this.$message.success('操作成功')
            this.getList();
            //通知父组件
            this.$emit('success')
          })

        },
        //踢回公海
        tiForm(){
          this.$refs.giveback.open=true;
          this.$refs.giveback.businessId=this.id;
        }
      }
    }
</script>

<style scoped>

</style>
